<template>
  <div>我是一个学生</div>
  <div>我叫: {{ name }}</div>
  <div>我今年: {{ age }}岁</div>
  <div>我的爱好有:</div>
  <ul>
    <li v-for="(hobby, index) in hobbies" :key="index">{{ hobby }}</li>
  </ul>
  <div>我的身体信息:</div>
  <ul>
    <li>身高: {{ bodyInfo.height }}cm</li>
    <li>体重: {{ bodyInfo.weight }}kg</li>
  </ul>
  <div v-if="address">我住在: {{ address }}</div>
  <div>我的国家: {{ country }}</div>
  <div>我的性别：{{ sex }}</div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'
interface Props {
  name: string
  age: number
  hobbies?: string[]
  bodyInfo: { height: number; weight: number }
  address?: string
  country?: string // 改为可选属性
  sex: '男' | '女' | '未知'
}
withDefaults(defineProps<Props>(), {
  hobbies: () => [],
  country: '中国',
})
</script>

<style scoped></style>
